﻿$(window).load(function () {
  $(".loading").fadeOut()
})

/****/
$(document).ready(function () {
  var whei = $(window).width()
  $("html").css({ fontSize: whei / 20 })
  $(window).resize(function () {
    var whei = $(window).width()
    $("html").css({ fontSize: whei / 20 })
  });
});

var dataArray; // 存放网络请求来的数据。

$(window).load(function () { $(".loading").fadeOut() })
$(function () {
  dataRequest();

  /**
   * 电影总体指标
   */
  function initTitle() {
    // 获取“电影总体指标”数据列表的组件
    var list = document.getElementsByClassName("yqlist")[0];
    list = list.firstElementChild;
    var listData = dataArray[0];
    // console.log(list);
    list.innerHTML = "";
    list.innerHTML += `<li><div class="yq">${listData.movie_cnt}<span>电影数量</span></div></li>`;
    list.innerHTML += `<li><div class="yq">${Math.floor(listData.avg_rating)}<span>平均评分</span></div></li>`;
    list.innerHTML += `<li><div class="yq">${Math.floor(listData.avg_rat_cnt)}<span>平均评论人数</span></div></li>`;
    list.innerHTML += `<li><div class="yq">${Math.floor(listData.avg_runtime)}<span>平均时长</span></div></li>`;
  }
  /**
   * 时间分布
   */
  function echarts_1() {
    var myChart = echarts.init(document.getElementById('echarts1'));
    var lineWords = dataArray[1];
    var option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' },
      },
      legend: {
        data: ['电影数', '评分'],
        textStyle: {
          color: "#fff"
        },
        itemWidth: 12,
        itemHeight: 10,
      },
      grid: {
        top: '25%',
        left: '3%',
        right: '4%',
        bottom: '10%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        axisLine: {
          lineStyle: {
            color: 'rgba(255,255,255,0.1)'
          }
        },
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: 7,
            
          },
          rotate: 45, // 手动设置旋转角度为45度 
        },
        
        data: lineWords.key
      },
      yAxis: [
        {
          type: 'value',
          name: '电影数',
          splitNumber: 6,
          position: 'left',
          nameTextStyle: {
            color: "#65ABE7",
            fontSize: 10,
          },
          axisLabel: {
            formatter: '{value}'
          },
          axisLabel: {
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: 7,
            },
          },

          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0)'
            }
          }
        },
        {
          type: 'value',
          name: '评分',
          splitNumber: 6,
          position: 'right',
          nameTextStyle: {
            color: "#65ABE7",
            fontSize: 10,
          },
          axisLabel: {
            formatter: '{value}'
          },
          axisLabel: {
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: 7,
            },
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0)'
            }
          }
        }
      ],
      series: [
        {
          name: '电影数',
          type: 'line',
          yAxisIndex: 0, // 使用左边的Y轴  
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              color: 'rgba(228, 228, 126, 1)',
              width: 2
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(228, 228, 126, .2)'
              }, {
                offset: 1,
                color: 'rgba(228, 228, 126, 0)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
            }
          },
          itemStyle: {
            normal: {
              color: 'rgba(228, 228, 126, 1)',
              borderColor: 'rgba(228, 228, 126, .1)',
              borderWidth: 12
            }
          },
          data: lineWords.val1
        },
        {
          name: '评分',
          type: 'line',
          yAxisIndex: 1, // 使用右边的Y轴  
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              color: 'rgba(255, 128, 128, 1)',
              width: 2
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(255, 128, 128,.2)'
              }, {
                offset: 1,
                color: 'rgba(255, 128, 128, 0)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
            }
          },
          itemStyle: {
            normal: {
              color: 'rgba(255, 128, 128, 1)',
              borderColor: 'rgba(255, 128, 128, .1)',
              borderWidth: 12
            }
          },
          data: lineWords.val2
        }
      ]
    };

    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });


  }
  /**
   * 类型分布
   */
  function echarts_2() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echarts2'));
    var lineWords = dataArray[5];
    var pieData = [];
    for (var i = 0; i < lineWords.key.length; i++) {
      var obj = {};
      obj.name = lineWords.key[i];
      obj.value = lineWords.val1[i];
      obj.rate = lineWords.val2[i];
      pieData.push(obj);
    }
    //   var pieData = [
    //     {
    //         name: '运动与健康',
    //         value: '1100'
    //     },
    //     {
    //         name: '餐饮',
    //         value: '2800'
    //     },
    //     {
    //         name: '外出与旅行',
    //         value: '4500'
    //     },
    //     {
    //         name: '衣物',
    //         value: '2202'
    //     },
    //     {
    //         name: '电子游戏',
    //         value: '2421'
    //     },
    //     {
    //         name: '医药',
    //         value: '800'
    //     }

    // ]
    // console.log(pieData);
    var option = {
      // 注意：饼图不是直角坐标系图表，就不用配置x轴和y轴了
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}片数量 : {c}<br/> (平均评分 : {d})'
      },
      legend: {
        type: 'scroll',
        orient: 'vertical', //图例列表的布局朝向（垂直排列）
        right: 3,
        y: 'center',
        bottom: 10,
        itemGap: 5,//图例的上下间距
        itemWidth: 8,//图例左侧图块的长度
        itemHeight: 8,//图例左侧图块的长度
        padding: 5,
        textStyle: {
          fontSize: 5,
          fontFamily: 'Microsoft YaHei',
          fontWeight: 400,
          color: '#D5F1FB',
        },
        pageTextStyle: {//设置分页的当前页与总页码的文本样式
          fontSize: 5,
          color: 'rgba(36, 196, 221, 0.95)'
        },
        pageIconColor: '#6495ed', //翻页下一页的三角按钮颜色
        pageIconInactiveColor: '#aaa', //翻页（即翻页到头时）
        pageIconSize: 5, //翻页按钮大小
        pageButtonGap: 7,//翻页按钮与图例的间距
        // pageFormatter: '',//隐藏翻页的数字
        pageButtonItemGap: 3,//翻页按钮的两个之间的间距
        // selected:this.monitorData.name可不写
        //格式化处理方案一： 
        // formatter: function (name) {
        //   return name.length > 17 ? name.substr(0, 17) + '...' : name
        // },
        //格式化处理方案二： 
        //开启tooltip
        data: lineWords.key
      },
      series: [
        {
          name: "访问来源",
          type: 'pie',
          radius: ['30%', '60%'], // 控制饼图的内外半径，从而调整大小  
          center: ['38%', '50%'], // 饼图的中心（圆心）位置
          data: pieData,
          // roseType: 'radius', // 南丁格尔图
          label: {//饼图文字的显示
            show: true,
            position: 'outside',
            formatter: '{b}', // 其中 {b} 是数据名，{c} 是数据值，{d} 是百分比  
            color: 'auto',
            fontSize: 7,
            fontWeight: 'bold',
            fontFamily: 'Arial, sans-serif',
            lineHeight: 20,
            align: 'center',
            verticalAlign: 'middle'
          },
          labelLine: {
            normal: {
              length: 3
            }
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },

        }
      ]
    }
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }
  /**
   * 电影列表
   */
  function echarts_3() {
    // 获取滚动列表的元素
    var list = document.getElementById("list");
    list.innerHTML = ""; // 清空列表
    var movies = dataArray[6];
    // 添加列表中的元素
    for (var i = 0; i < movies.length; i++) {
      var li_data = movies[i];
      list.innerHTML += `<li><p><span>${li_data.name}</span><span>${li_data.release_date}</span></p></li>`;
    }

    $(function () {
      $('.wrap').liMarquee({
        direction: 'up',//身上滚动 
        runshort: false,//内容不足时不滚动
        scrollamount: 20//速度
      });
    });
  }
  /**
   * 热门主演
   */
  function echarts_5() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echarts5'));
    var keywords = dataArray[4];
    var option = {
      series: [{
        type: 'wordCloud',
        //maskImage: maskImage,
        sizeRange: [5, 40],
        rotationRange: [0, 45, 90, -45],
        rotationStep: 45,
        gridSize: 8,
        shape: 'pentagon',
        width: '90%',
        height: '90%',
        textStyle: {
          color: function () {
            return `rgb(${[
              Math.round(Math.random() * 200 + 55),
              Math.round(Math.random() * 200 + 55),
              Math.round(Math.random() * 200 + 55)
            ].join(',')})`
          },
          fontFamily: 'sans-serif',
          fontWeight: 'normal',
          emphasis: {
            shadowBlur: 10,
            shadowColor: '#333'
          }
        },
        data: keywords
      }]
    };
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }
  /**
   * 国家电影数
   */
  function echarts_4() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echarts4'));
    var totalData = dataArray[2];
    var xData = [], valData = [];
    for (var i = 0; i < totalData.length; i++) {
      xData.push(totalData[i].name);
      valData.push(totalData[i].value);
    }
    console.log(xData);
    option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' },

      },
      grid: {
        left: '0',
        top: '10',
        right: '15',
        bottom: '0',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: xData,
        axisLine: { show: false },

        axisLabel: {
          textStyle: {
            color: 'rgba(255,255,255,.6)',
            fontSize: 7
          }
        },
      },

      yAxis: {
        type: 'value',
        splitNumber: 6,
        axisLine: { show: false },
        axisTick: { show: false },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255,255,255,0.05)'
          }
        },
        axisLabel: {
          textStyle: {
            color: 'rgba(255,255,255,.6)',
            fontSize: 7
          },
        },
      },
      series: [{
        name: '影片数',
        type: 'bar',
        barWidth: '15%',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#8bd46e'
            }, {
              offset: 1,
              color: '#03b48e'
            }]),
            barBorderRadius: 11,
          }

        },
        data: valData

      }
      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }
  /**
   * 活跃导演
   */
  function echarts_6() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echarts6'));
    var keywords = dataArray[3];

    var option = {
      series: [{
        type: 'wordCloud',
        //maskImage: maskImage,
        sizeRange: [5, 40],
        rotationRange: [0, 0],
        rotationStep: 45,
        gridSize: 8,
        shape: 'pentagon',
        width: '90%',
        height: '90%',
        textStyle: {
          color: function () {
            return 'rgb(' + [
              Math.round(Math.random() * 160),
              Math.round(Math.random() * 160),
              Math.round(Math.random() * 160)
            ].join(',') + ')';
          },
          fontFamily: 'sans-serif',
          fontWeight: 'normal',
          emphasis: {
            shadowBlur: 10,
            shadowColor: '#333'
          }
        },
        data: keywords
      }]
    };
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }

  /**
   * 网络请求数据，请求成功后展示
   */
  function dataRequest() {
    // 定义多个网络请求的URLs  
    const urls = [
      'http://leafdomain.cn:8083/movie/getData0',
      'http://leafdomain.cn:8083/movie/getData1',
      'http://leafdomain.cn:8083/movie/getData2',
      'http://leafdomain.cn:8083/movie/getData3',
      'http://leafdomain.cn:8083/movie/getData4',
      'http://leafdomain.cn:8083/movie/getData5',
      'http://leafdomain.cn:8083/movie/getData6'
    ];

    // 发起请求的函数，返回Promise  
    function fetchData(url) {
      return fetch(url)
        .then(response => {
          if (!response.ok) {
            throw new Error('Network response was not ok');
          }
          return response.json(); // 假设服务器返回的是JSON数据  
        })
        .catch(error => {
          console.error('Fetch error for URL:', url, error);
          throw error; // 可以选择重新抛出错误，或者返回一个默认值等  
        });
    }

    // 使用Promise.all()同时发起所有请求  
    Promise.all(urls.map(url => fetchData(url)))
      .then(results => {
        // results是一个数组，包含了所有请求的结果  
        console.log(results); // 处理所有请求的结果  
        dataArray = results;
        // 在这里执行所有请求都完成后的代码  
        initTitle()
        echarts_1()
        echarts_2()
        echarts_3()
        echarts_4()
        echarts_5()
        echarts_6()
      })
      .catch(error => {
        // 如果有任何一个请求失败，这里会捕获到错误  
        console.error('One or more requests failed:', error);
      });
  }
})




























